﻿
@{
    Layout = null;
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
    @*<link href="~/css/bui.1.1.21.css.bs3.bui.css" rel="stylesheet" />
        <link href="~/css/bui.1.1.21.css.bs3.dpl.css" rel="stylesheet" />*@
</head>
<body>
    <!-- 初始隐藏 dialog内容 -->
    <div class="demo-content">

        <div class="row" style="margin-left:75px;">
            <div class="span24">
            
                <form id="searchForm" class="form-horizontal" tabindex="0" style="outline: none;">
                    <div class="row">
                        <div class="control-group span8">
                            <label class="control-label">供应商编码：</label>
                            <div class="controls">
                                <input type="text" name="c" class="control-text">
                            </div>
                        </div>
                        <div class="form-actions span5">
                            <button id="btnSearch" type="submit" class="button button-primary">检索</button>
                        </div>
                    </div>

                </form>

            </div>
        </div>
        <div class="row">
            <div class="span16 offset3 doc-content">
                <div id="grid">

                </div>
                <!--分页-->
                @*<div id="bar"></div>*@
            </div>
        </div>
        <!-- 初始隐藏 dialog内容 -->
        <div id="content" class="hide">
            <form class="form-horizontal">
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label"><s>*</s>姓名：</label>
                        <div class="controls">
                            <input name="realName" type="text" data-rules="{required:true}" class="input-normal control-text">
                        </div>
                    </div>
                    <div class="control-group span8">
                        <label class="control-label"><s>*</s>密码：</label>
                        <div class="controls">
                            <input name="userPwd" type="text" data-rules="{required:true,number : true}" class="input-normal control-text">
                        </div>
                    </div>
                </div>
            </form>
        </div>

    </div>
</body>
</html>
<script src="http://g.tbcdn.cn/fi/bui/jquery-1.8.1.min.js"></script>
<script src="http://g.alicdn.com/bui/seajs/2.3.0/sea.js"></script>
<script src="http://g.alicdn.com/bui/bui/1.1.21/bui.js"></script>
<script type="text/javascript">
    BUI.use(['bui/grid', 'bui/data'], function (Grid, Data) {
        var Grid = Grid,
            Store = Data.Store,
            columns = [{ title: '姓名', dataIndex: 'realName', width: 200 },
            { title: '登入名', dataIndex: 'userName', width: 200 },
            { title: '密码', dataIndex: 'userPwd', width: 200 },
            {
                title: '操作', renderer: function () {
                    return '<span class="grid-command btn-edit">编辑</span>'
                }
            }
            ];

        var isAddRemote = false,
            editing = new Grid.Plugins.DialogEditing({
                contentId: 'content', //设置隐藏的Dialog内容
                triggerCls: 'btn-edit', //触发显示Dialog的样式
                editor: {
                    title: '修改',
                    width: 600,
                    listeners: {
                        show: function () {
                            var form = this.get('form');
                            if (isAddRemote) {
                                    var bField = form.getField('realName');
                                    bField.set('remote', {
                                        url: '/Purchase/EnditData',
                                        dataType: 'json',//默认为字符串
                                        callback: function (data) {
                                            if (data.success) {
                                                return '';
                                            } else {
                                                return data.msg;
                                            }
                                        }
                                    });
                                
                            } 
                            isAddRemote = true;
                                //else {
                            //    var input = document.getElementsByTagName("input");
                            //    for (var i = 0, l = input.length; i < l; i++) {

                            //        alert(input[i].name + ':' + input[i].value);

                            //    }
                               
                            //}
                            //TO DO
                        }
                    }
                }
            }),


            store = new Store({
                url: '/Purchase/MenusData',
                autoLoad: true,
                pageSize: 3,
                proxy: {
                    ajaxOptions: { //ajax的配置项，不要覆盖success,和error方法
                        traditional: true,
                        type: 'post'
                    }
                }
            }),

            grid = new Grid.Grid({
                render: '#grid',
                columns: columns,
                width: 700,
                forceFit: true,
                tbar: { //添加、删除
                    items: [{
                        btnCls: 'button button-small',
                        text: '<i class="icon-plus"></i>添加',
                        listeners: {
                            'click': addFunction
                        }
                    },
                    {
                        btnCls: 'button button-small',
                        text: '<i class="icon-remove"></i>删除',
                        listeners: {
                            'click': delFunction
                        }
                    }]
                },
                plugins: [editing, Grid.Plugins.CheckSelection],
                store: store
            });

        grid.render();

        //添加记录
        function addFunction() {
            var newData = { b: 0 };
            editing.add(newData, 'a'); //添加记录后，直接编辑
        }
        //删除选中的记录
        function delFunction() {
            var selections = grid.getSelection();
            store.remove(selections);
        }
    });

</script>
<!-- script end -->
